<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
    <style>
        /*
            父元素:当前元素的上级元素
            子元素:当前元素的下级元素
            祖先元素:当前元素的父元素、父元素的父元素、父元素的父元素的父元素...
            后代元素:当前元素的子元素、子元素的子元素、子元素的子元素的子元素...
            同级元素:同一个层次的元素,同一个辈分
        */
        #d1,#p1,#s1{
            color:red;
        }
        .c1 .c2{
            color:green;
        }
        .c3>.c4{
            color: blue;
        }
        .c5+span{
            color:pink;
        }
        /*.c6~span{*/
            /*color:yellow;*/
        /*}*/
        .c7+span{
            color:red;
        }
    </style>
</head>
<body>
<h2>多个选择器以逗号分隔</h2>
<div id="d1">这是id为d1的div</div>
<p id="p1">这是id为p1的段落</p>
<span id="s1">这是span</span>
<h2>多个选择器以空格分隔</h2>
<div class="c1">
    <div class="c2">这是c1中的c2</div>
    <div>
        <div class="c2">这是c1中的div中的c2</div>
    </div>
    <span>
        <span class="c2">这是c1中的span中的c2</span>
    </span>
</div>
<span>这是c2</span>
<h2>多个选择器以>分隔</h2>
<div class="c3">
    <div class="c4">这是c3中的c4</div>
    <div>
        <div class="c4">这是c3中的div中的c4</div>
    </div>
    <span class="c4">
        <span>这是c3中的span中的c4</span>
    </span>
</div>
<h2>多个选择器之间以+分隔</h2>
<div class="c5">
    <span>这是c5中的span</span>
    <div>这是c5中的div</div>
</div>
<span>这是c5后面的span</span>
<span>这是c5后面的span</span>
<span>这是c5后面的span</span>
<h2>多个选择器之间以~分隔</h2>
<div class="c6">
    <span>这是c6中的span</span>
    <div>这是c6中的div</div>
</div>
<span>这是c6后面的span</span>
<span>这是c6后面的span</span>
<span>这是c6后面的span</span>

<hr>
<span class="c7">这是c7</span><br>
<span>这是c7后面的span</span><br>
<span>这是c7后面的span</span><br>
<span>这是c7后面的span</span><br>
</body>
</html>